<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<f:view xmlns="http://www.w3.org/1999/xhtml"
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:p="http://primefaces.org/ui">
<h:html>
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Ruta Optima</title>
        <link href="css/style.css" rel="stylesheet"/>
    </h:head>

    <h:body styleClass="planeamiento">

        <h:form id="formPlaneamiento">
            <p:growl id="growl" showDetail="true" sticky="true" />
        <p:layout>
            <p:layoutUnit position="west" style="width:100px;height:800px;">
               <h:panelGrid columns="1">
                <h:outputText value="Maldita cuestion" />
               </h:panelGrid>
            </p:layoutUnit>
            <p:layoutUnit position="center"  style="width:900px;height:800px;">
                <p:layout styleClass="panel-titulo">
                    <p:layoutUnit position="center"  styleClass="central" >
                        <h:panelGroup>
                            <h:graphicImage url="pics/logo.jpg" styleClass="logo" >
                            </h:graphicImage>
                        </h:panelGroup>
                    </p:layoutUnit>
                </p:layout>
                <p:layout styleClass="panel">
                    <p:layoutUnit position="center" styleClass="central" >
                        <p:panelGrid columns="2" styleClass="marco" >
                            <p:panelGrid columns="1" styleClass="centroIzq">
                                <h:panelGroup>
                                    <h:outputText value="Zona: " />
                                    <p:selectOneMenu value="#{OptimusBean.zonaSeleccionada}" >
                                        <f:selectItem itemLabel="" itemValue="" />
                                        <f:selectItems value="#{OptimusBean.zonas}"
                                                       var="idx" itemLabel="#{idx.descripcion}"
                                                       itemValue="#{idx.codigo}" />
                                        <p:ajax update="tablaElementosPublicitarios"
                                                listener="#{OptimusBean.seleccionarZona}"
                                                event="change"/>
                                    </p:selectOneMenu>
                                    <h:outputText value="Campana " />
                                    <p:selectOneMenu value="#{OptimusBean.campanaSeleccionada}" >
                                        <f:selectItem itemLabel="" itemValue="" />
                                        <f:selectItems value="#{OptimusBean.campanas}"
                                                       var="idy" itemLabel="#{idy.codigo}"
                                                       itemValue="#{idy.codigo}" />
                                        <p:ajax update="tablaElementosPublicitarios"
                                                listener="#{OptimusBean.seleccionarCampana}"
                                                event="change"/>
                                    </p:selectOneMenu>

                                </h:panelGroup>
                                <p:scrollPanel styleClass="scroll-1" >
                                <p:dataTable id="tablaElementosPublicitarios"
                                             var="item"
                                             value="#{OptimusBean.lstElementoPublicitario}"
                                             styleClass="tabla-ep">
                                    <p:column id="modelHeader"  styleClass="columna-nombre">
                                        <f:facet name="header">
                                            Nombre
                                        </f:facet>
                                        <h:outputText value="#{item.nombre}" />
                                    </p:column>

                                    <p:column styleClass="columna-numero">
                                        <f:facet name="header">
                                            Latitud
                                        </f:facet>
                                        <h:outputText value="#{item.latitud}"  />
                                    </p:column>

                                    <p:column styleClass="columna-numero">
                                        <f:facet name="header" >
                                            Longitud
                                        </f:facet>
                                        <h:outputText value="#{item.longitud}"  />
                                    </p:column>
                                </p:dataTable>
                                </p:scrollPanel>
                            </p:panelGrid>
                            <p:panelGrid columns="1" styleClass="lado-derecho-arriba">
                                <p:dataTable id="tablaVerificadorMapa" var="item"
                                             value="#{OptimusBean.lstMapaCVO}"
                                             styleClass="tabla">
                                    <p:column id="modelHeader">
                                        <f:facet name="header">
                                            Mapa
                                        </f:facet>
                                        <p:selectOneMenu value="#{item.mapaSeleccionado}" >
                                            <f:selectItems itemLabel="" itemValue="" />
                                            <f:selectItems value="#{item.mapas}"
                                                           var="idx" itemLabel="#{idx.descripcion}"
                                                           itemValue="#{idx.codigo}" />
                                        </p:selectOneMenu>
                                    </p:column>
                                    <p:column>
                                        <f:facet name="header">
                                            Verificador
                                        </f:facet>
                                        <p:selectOneMenu value="#{item.verificadorSeleccionado}" >
                                            <f:selectItems itemLabel="" itemValue="" />
                                            <f:selectItems value="#{item.verificadores}"
                                                           var="idx" itemLabel="#{idx.nombre}"
                                                           itemValue="#{idx.codigo}" />
                                        </p:selectOneMenu>
                                    </p:column>
                                    <p:column styleClass="columna-mapa">
                                        <f:facet name="header">
                                            VerMapa
                                        </f:facet>
                                        <p:commandButton value="Ver Mapa"
                                                         id="btnVerMapa"
                                                         styleClass="botonMapa"
                                                         action="mostrar-mapa"/>
                                    </p:column>
                                </p:dataTable>
                            </p:panelGrid>
                        </p:panelGrid>
                    </p:layoutUnit>
                    <p:layoutUnit position="south" styleClass="sur" >
                        <p:commandButton value="Generar Ruta Optima"
                                         id="btnRutas"
                                         styleClass="boton"
                                         actionListener="#{OptimusBean.generarRutaOptima}" />
                        <p:commandButton value="Generar Mapas"
                                         id="btnMapas"
                                         styleClass="boton"
                                         actionListener="#{OptimusBean.generarMapas}"/>
                        <p:commandButton value="Guardar Mapas"
                                         id="btnGuardarMapas"
                                         styleClass="boton"
                                         actionListener="#{OptimusBean.guardarMapas}"/>
                    </p:layoutUnit>
                </p:layout>
           </p:layoutUnit>
        </p:layout>
        </h:form>
    </h:body>
</h:html>
</f:view>